<template>
  <div style="width: 100%; height: 100%">
    <div v-if="showChart" ref="chart" style="width: 100%; height: 100%"></div>
    <nodata-box v-else></nodata-box>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Color from 'color'
export default {
  name: 'GraphChart',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    links: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      color: '#9f91eb'
    }
  },
  computed: {
    showChart() {
      return this.data === undefined || this.data.length > 0
    }
  },
  mounted() {
    this.initChart()
    this.updateChart()
  },
  beforeDestroy() {
    this.destoryChart()
  },
  methods: {
    initChart() {
      if (this.chart || !Array.isArray(this.data) || this.data.length === 0) {
        return
      }
      this.chart = echarts.init(this.$refs.chart)
    },
    updateChart() {
      if (!this.chart) {
        this.initChart()
      }
      if (this.chart) {
        this.chart.clear()
        this.chart.setOption(this.buildOption())
      }
    },
    buildOption() {
      const sColor = Color(this.color)
      this.data.map((item) => {
        if (!item.itemStyle) return item
        if (!item.itemStyle.color) return item
        const c = Color(item.itemStyle.color)
        item.itemStyle.borderColor = c.lighten(0.2).toString()
        return item
      })
      return {
        tooltip: {
          show: true,
          formatter(params) {
            if (params.dataType === 'edge') return
            const { color, data } = params
            const html = `
            <div class="series-item">
              <div class='marker' style="background-color:${color}"></div>
              <div class="content-container">
                <span style="display: inline-block; width: 12px; height: 12px; background-color: ${color}; border-radius: 6px"></span>
                <span class="content-name">${data.name}:</span>
                <span class="content-value">${data.value.toLocaleString()}</span>
              </div>
            </div>
            `
            return html
          }
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            symbolSize: 30,
            draggable: true,
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            cursor: 'pointer',
            roam: true,
            force: {
              gravity: 0.02,
              edgeLength: 100
            },
            itemStyle: {
              color: this.color,
              borderWidth: 3,
              borderColor: sColor.lighten(0.2).toString()
            },
            label: {
              show: true,
              position: 'right',
              color: this.color
            },
            emphasis: {
              scale: false,
              itemStyle: {
                borderColor: '#FF0000'
              }
            },
            data: this.data,
            links: this.links
          }
        ]
      }
    },
    destoryChart() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    }
  }
}
</script>

<style scoped lang="scss"></style>
